<template>
	<view class="contents">
		<view class="t-wrap">
			<view class="t-jf">
				<view class="t-jf-points"
					style="display: flex;justify-content: space-between;width: 100%;padding-top: 50rpx;">
					<view class="t-jf-info">
						<view class="t-jf-num">{{userInfo.score}}</view>
						<view class="t-jf-detail" hover-class="t-hc" @click="toDetail"
							style="display: flex;align-items: center;">
							<text>积分明细</text>
							<image src="/static/icon-right.png"></image>
						</view>
					</view>
				<!-- 	<view class="t-jf-mall" hover-class="t-hc" @click="toMall">
						积分商城
					</view> -->
				</view>
				
				<view class="" style="display: inline-block;">
					<view class=""
						style="display: inline-block;text-align: center;border-radius: 20rpx;margin-left: 20rpx;"
						@click="showTop=true">
						<view class=""
							style="background: rgb(255, 204, 189);color: rgb(255, 82, 32);font-size: 28rpx;padding: 7rpx 8rpx;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;">
							已连签</view>
						<view class=""
							style="background: rgb(255, 125, 80);color: #fff;font-size: 28rpx;padding: 7rpx 8rpx;border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx;">
							{{continue_days}}天
						</view>
					</view>
				</view>
				<view class="" style="display: inline-block;margin-left: 13%">
					<view class="" style="display: flex;">
						<view class="" style="margin-right: 80rpx;background: #ffd896;padding: 10rpx;border-radius: 50%;color: #f15400" v-if="isSign!=1">
							<view class="" style="background: #ffd896;font-size: 44rpx;width: 120rpx;height: 120rpx;display: flex;flex-direction: column;align-items: center;border-radius: 50%;border: 5rpx solid #ff943a;justify-content: center;">
								<view class="" style="font-weight: bold;">{{((continue_days)*Number(dataList.rules.inc_num))+Number(dataList.rules.everyday)}}</view>
								<view class="" style="font-size: 22rpx;">今日签到</view>
							</view>
						</view>
						<view class="" style="margin-right: 80rpx;background: #ffd896;padding: 10rpx;border-radius: 50%;color: #f15400">
							<view class="" style="background: #ffd896;font-size: 44rpx;width: 120rpx;height: 120rpx;display: flex;flex-direction: column;align-items: center;border-radius: 50%;border: 5rpx solid #ff943a;justify-content: center;">
								<view class="" style="font-weight: bold;">{{((continue_days+1)*Number(dataList.rules.inc_num))+Number(dataList.rules.everyday)}}</view>
								<view class="" style="font-size: 22rpx;">明日签到</view>
							</view>
						</view>
						<view class="" style="margin-right: 80rpx;background: #ffd896;padding: 10rpx;border-radius: 50%;color: #f15400"  v-if="isSign==1">
							<view class="" style="background: #ffd896;font-size: 44rpx;width: 120rpx;height: 120rpx;display: flex;flex-direction: column;align-items: center;border-radius: 50%;border: 5rpx solid #ff943a;justify-content: center;">
								<view class="" style="font-weight: bold;">{{((continue_days+2)*Number(dataList.rules.inc_num))+Number(dataList.rules.everyday)}}</view>
								<view class="" style="font-size: 22rpx;">后天签到</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 签到按钮 -->
				<view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
					<button class="ss-reset-button sign-btn" v-if="isSign === 0" @click="onSign">签到</button>
					<button class="ss-reset-button already-btn" v-if="isSign === 1" disabled>已签到</button>
				</view>
			</view>
			<view class="t-bg-wrap">
				<view class="t-bg"></view>
			</view>
			
		</view>
		

		<tn-popup v-model="showTop" mode="center" width="95%">
			<view class="" style="padding: 30rpx 20rpx;background: rgb(255, 128, 0);">
				<view class=""
					style="display: flex;justify-content: space-between;padding: 10rpx 0;align-items: center;">
					<view class=""
						style="background-color: antiquewhite;padding: 15rpx;border-radius: 50%;display: flex;align-items: center;opacity: 0;">
						<text class="tn-icon-close" style="font-weight: bold;"></text>
					</view>
					<view class="" style="color: #fff;font-size: 42rpx;font-weight: bold;">签到日历</view>
					<view class=""
						style="background-color: antiquewhite;padding: 15rpx;border-radius: 50%;display: flex;align-items: center;opacity: 0.5;">
						<text class="tn-icon-close" style="font-weight: bold;" @click="showTop=false"></text>
					</view>
				</view>
				<view class="" style="padding:20rpx 0 60rpx 0;background: #fff;">
					<view class=""
						style="font-size: 42rpx;color: rgb(131, 89, 13);font-weight: bold;padding-left: 20rpx;margin: 20rpx 0;">
						已连续签到<text
							style="background:#ffedd7;padding: 5rpx 10rpx;color: red;font-size: 32rpx;font-weight: bold;">{{continue_days}}</text>天
					</view>
					<view class=""
						style="display: flex;justify-content: space-between;background: rgb(255, 250, 240);padding: 20rpx 30rpx;align-items: center;color: chocolate;">
						<text class="tn-icon-left" style="font-size: 42rpx;" @click="handleCalendar(0)"></text>
						<view class="">
							<view>{{ cur_year || '--' }} 年 {{ cur_month || '--' }} 月</view>
						</view>
						<text class="tn-icon-right" style="font-size: 42rpx;" @click="handleCalendar(1)"></text>
					</view>
					<!-- 显示星期 -->
					<view class="week ss-flex">
						<view class="week-item ss-flex ss-row-center" v-for="(item, index) in weeks_ch" :key="index">
							{{ item.title }}
						</view>
					</view>
					<!-- 日历表 -->
					<view class="myDateTable">
						<view v-for="(item, j) in datadays" :key="j"
							class="dateCell ss-flex ss-row-center ss-col-center">
							<!-- 空格 -->
							<view class="ss-flex ss-row-center ss-col-center">
								<text :decode="true">&nbsp;&nbsp;</text>
							</view>
							<view>
								<!-- 已签到日期 -->
								<view v-if="item.is_sign" class="is-sign" style="align-items: center;display: flex;">
									<view class="" style="width: 50rpx;height: 50rpx;">
										<image class="is-sign-image"
											src="https://oss.taoding1688.com/assets/addons/shop/uniapp/app/correct.png">
										</image>
									</view>
									<view class="is-sign-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>

								</view>
								<!-- 未签到日期 -->
								<view class="is-sign" v-if="item.is_replenish == 1" style="align-items: center;"
									@tap="onShowRetroactive(item.date)">
									<!-- <view class="" style="border: 1rpx solid yellow;padding: 10rpx;border-radius: 50%;font-size: 24rpx;color: #55aa00;font-weight: bold;">未</view> -->
									<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
								</view>
								<view class="is-sign" style="align-items: center;"
									v-if="item.is_replenish == 0 && !item.is_sign">
									<view class="" v-if="item.current=='before' && item.is_sign!=1"
										style="border:1rpx solid rgb(255, 128, 0);border-radius: 50%;font-size: 24rpx;color:rgb(255, 128, 0);font-weight: bold;width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;">
										未</view>
									<view class="" v-else
										style="border:1rpx solid #000;border-radius: 50%;font-size: 22rpx;color: red;font-weight: bold;width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;">
										{{(j-dataList.continue_days)*Number(dataList.rules.inc_num)+Number(dataList.rules.everyday)}}</view>
									<view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</tn-popup>






		<!-- <view class="t-sign-con">
			<view class="wrap">
				<view class="t-sign-top">
					<view class="lx">已连续签到<text>{{dataList.continue_days+5}}</text>天</view>
					<view class="gz" hover-class="t-hc" @click="openRule">签到规则<image src="/static/icon-ask.png"></image>
					</view>
				</view>
				<view class="t-sign-body">
					<view :class="['t-sign-item',{'signed':item.show}]" v-for="(item,index) in list" :key="index">
						<view class="t-img-con">
							<view class="t-img">
								<image :src="'/static/icon-'+(item.show?'check':'uncheck')+'.png'"></image>
							</view>
						</view>
						<text v-if="dataList.continue_days<=6">+{{(index+1)*5}}</text>
						<text v-else>+{{5*(dataList.continue_days+(index+1))}}</text>
					</view>
				</view>
				<view @click="handleSignIn" :class="['t-sign-btn',{'t-signed':isSign}]">{{isSign?'今日已签到':'立即签到'}}</view>
			</view>
		</view> -->


	<!-- 	<view class="" style="width: 100%;margin: 15rpx 0;background: #f2f2f2;">
			<view class="" style="display: flex;justify-content: space-between;padding: 10rpx 10rpx;">
				<view class="uni-margin-wrap" style="background: #fff;padding: 15rpx;border-radius: 10rpx;">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<view class="" style="display: flex;justify-content: space-between;border-radius: 10rpx;">
								<image :src="info.app.cdnurl+item.image" mode="widthFix"
									style="width: 180rpx;height: 180rpx;border-radius: 10rpx;"></image>
								<view class=""
									style="display: flex;flex-direction: column;flex: 1;padding: 0rpx 20rpx;justify-content: space-evenly;">
									<view class="" style="font-size: 38rpx;color: rgb(0, 0, 0);font-weight: bold;">大额抵
									</view>
									<view class="" style="font-size: 28rpx;">{{item.title.slice(0,6)}}</view>
									<view class="" style="font-size: 28rpx;color: rgb(255, 82, 32);">赚金币抵更多</view>
									<view class="moneyIcon" style="display: flex;align-items: center;">
										￥1231
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="" style="width: 38%;background: #ffffff;padding: 10rpx;border-radius: 10rpx;">
					<view class="" style="">
						<view class="">兑红包</view>
						<view style="background: #eb473f;padding: 5rpx;right: 15rpx;top: 70%;border-radius: 10rpx;"
							@click="bottomPopup">
							<view
								style="border-radius: 10rpx;color: red;background: #fff;padding: 12rpx 5rpx;text-align: center;font-size: 38rpx;border-bottom-left-radius:100rpx 30rpx;border-bottom-right-radius:100rpx 30rpx;">
								￥0.36</view>
							<view style="font-size: 24rpx;color: #fff;padding: 20rpx 0;">1天后失效</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <recommend /> -->
		<!-- 弹出层-签到领积分 -->
		<kevy-mask :show="showSignBox" v-if="showSignBox" @click="closeSign" :maskClose="true" :z-index="10">
			<!-- <view v-if="showSignBox" class="t-overlay" @mousemove.stop @click="closeSign"> -->
			<view class="t-o-wrap">
				<image class="t-sign-bg"
					src="https://oss.taoding1688.com/static/uniapp/static/images/mall/my/icon_20241125001.png"></image>
				<view class="t-g-jf">+{{dataList.continue_days*5}}积分</view>
				<view class="t-g-desc">已连续签到{{dataList.continue_days}}天，继续签到有惊喜哦~</view>
				<view class="close-btn" @click="closeSign">确认</view>
			</view>
		</kevy-mask>
		<!-- </view> -->
		<!-- 弹出层-积分规则 -->
		<kevy-mask :show="showRuleBox" v-if="showRuleBox" @click="closeRule" :maskClose="true" :z-index="10">
			<view class="t-o-wrap">
				<view class="t-rule">
					<view class="title">
						积分规则说明
					</view>
					<view class="desc" v-if="dataList.rules && dataList.rules.everyday">
						1、每日签到固定 {{ dataList.rules.everyday }} 积分
						<text v-if="dataList.rules.is_inc == '1'"> ，次日递增奖励 {{ dataList.rules.inc_num }} 积分 </text>
					</view>
				</view>
				<image @click="closeRule" class="t-close" src="../../../static/close.png"></image>
			</view>
		</kevy-mask>

		<view class="tui-product-box">
		<!-- 	<tn-sticky>
				<view class="tui-search-input" style="margin: 20rpx 0;">
					<icon type="search" :size='14' color='#333'></icon>
					<input confirm-type="search" placeholder="大家都在搜" :focus="true" @confirm="confirm" auto-focus
						placeholder-class="tui-input-plholder" class="tui-input" v-model="key" @input="inputKey"
						style="width: 100%;color: #000;" />
					<icon type="clear" :size='14' color='#bcbcbc' @click="cleanKey" v-show="key"></icon>
				</view>
			</tn-sticky> -->

			<view class="tui-product-list" style="background: #f2f2f2;">
				<view class="tui-product-container">
					<block v-for="(item, index) in lists" :key="index" v-if="(index + 1) % 2 != 0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
							<image :src="info.app.cdnurl+ item.image" class="tui-pro-img" lazy-load mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price"
											v-if="item.price && item.price[0]>0">￥{{ item.price[0] }}+</text>
										<text class="">积分{{ item.score }}</text>
									</view>
								</view>
								<view class=""
									style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
									<view class="" style="font-size: 26rpx;color: #c4c4c4;">库存{{item.stock}}</view>
									<view class=""
										style="background: linear-gradient(90deg, #fe8900, #ff5e00);color: #fff;padding: 5rpx 18rpx;border-radius: 10rpx;">
										去兑换</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
						<!-- <template is="productItem" data="{{item,index:index}}" /> -->
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item, index) in lists" :key="index" v-if="(index + 1) % 2 == 0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
							<image :src="info.app.cdnurl+ item.image" class="tui-pro-img" lazy-load mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price"
											v-if="item.price && item.price[0]>0">￥{{ item.price[0] }}+</text>
										<text class="">积分{{ item.score }}</text>
									</view>
									<view class=""
										style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
										<view class="" style="font-size: 26rpx;color: #c4c4c4;">库存{{item.stock}}</view>
										<view class=""
											style="background: linear-gradient(90deg, #fe8900, #ff5e00);color: #fff;padding: 5rpx 18rpx;border-radius: 10rpx;">
											去兑换</view>
									</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const util = require("@/util/util.js")
	import recommend from '@/components/recommend.vue'
	import kevyMask from '../../kevy-mask/kevy-mask.vue';
	import {
		getActivitySignin,
		getSigninSignin,
		getUserProfile,
		getScoreshopList
	} from "@/apis/index.js"
	export default {
		components: {
			kevyMask,
			recommend
		},
		data() {
			return {
				list_rows: 10,
				page: 1,
				lists: [],
				last_page: '',
				customStyle: {
					"color": "red"
				},
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				cur_day: 0, //当前选择的天
				showTop: false,
				continue_days: '',
				weeks_ch: [{
						title: '周日',
						value: '0',
					},
					{
						title: '周一',
						value: '1',
					},
					{
						title: '周二',
						value: '2',
					},
					{
						title: '周三',
						value: '3',
					},
					{
						title: '周四',
						value: '4',
					},
					{
						title: '周五',
						value: '5',
					},
					{
						title: '周六',
						value: '6',
					},
				], //星期
				datadays: [],
				key: '',
				userInfo: [],
				isSign: 0,
				list: [],
				//今日是否签到
				isSigned: false,
				//是否显示签到弹框
				showSignBox: false,
				dataList: {},
				//是否显示签到规则弹框
				showRuleBox: false,
				//积分规则说明
				rule: "",
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: false,
				interval: 11500,
				duration: 500,
				swiperList: [{
						"id": 59,
						"title": "威力烧水壶保温一体全自动保温热水壶2.5L便携式304不锈钢电水壶",
						"image": "/uploads/20241009/f09fecdd21d11c95b7f09ace01163b1c.jpg",
						"price": [
							"52.00"
						],
						"sales": 1
					},
					{
						"id": 59,
						"title": "威力烧水壶保温一体全自动保温热水壶2.5L便携式304不锈钢电水壶",
						"image": "/uploads/20241009/f09fecdd21d11c95b7f09ace01163b1c.jpg",
						"price": [
							"52.00"
						],
						"sales": 1
					},
					{
						"id": 59,
						"title": "威力烧水壶保温一体全自动保温热水壶2.5L便携式304不锈钢电水壶",
						"image": "/uploads/20241009/f09fecdd21d11c95b7f09ace01163b1c.jpg",
						"price": [
							"52.00"
						],
						"sales": 1
					}
				]
			}
		},
		onLoad() {
			if (uni.getStorageSync('list')) {
				this.list = uni.getStorageSync('list')
			} else {
				this.list = [{
						id: 1,
						show: false
					},
					{
						id: 2,
						show: false
					},
					{
						id: 3,
						show: false
					},
					{
						id: 4,
						show: false
					},
					{
						id: 5,
						show: false
					},
					{
						id: 6,
						show: false
					},
					{
						id: 7,
						show: false
					}
				]

			}
			this.getDataList()
			this.getDataLists()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getDataLists()
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getDataLists() {
				getScoreshopList(this.list_rows, this.page).then(res => {
					console.log(res)
					this.lists = [...this.lists, ...res.data.data]
					this.last_page = res.data.last_page
				})
			},
			detail(item) {
				uni.navigateTo({
					url: `/templatePage/projectPoints/projectPoints?index=${item.id}`
				})
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			inputKey(e) {
				this.key = util.trim(e.detail.value);
			},
			cleanKey() {
				this.key = ''
			},
			getUserInfo() {
				getUserProfile().then(res => {
					this.userInfo = res.data
					this && this.$tn.vuex('userInfos', res.data)
				})
			},
			getDataList(month) {
				console.log(month)
				let _this = this
				getActivitySignin(month).then(res => {
					_this.dataList = res.data
					_this.datadays = res.data.days


					_this.datadays.forEach((i, index) => {
						if (i.current == 'today') {
							_this.isSign = i.is_sign;
						}
						if (index < i.week) {
							index++;
							var obj = {
								day: null,
								is_sign: false,
							};
							_this.datadays.unshift(obj);
						}
						if (index == 1) {
							let arr = i.date.split('-');
							_this.cur_year = arr[0];
							_this.cur_month = arr[1];
						}
					});
					if (_this.datadays[0].day == null) {
						_this.datadays.forEach((i, index) => {
							if (i.current == 'today') {
								_this.isSign = i.is_sign;
							}
						});
					}
					_this.continue_days = res.data.continue_days;



				})
			},
			//  展示出 连续的7天      

			// async onSign() {
			// 	const {
			// 		code,
			// 		data
			// 	} = await getSigninSignin();
			// 	if (code === 1) {
			// 		this.showModel = true;
			// 		this.signin = data;
			// 		// getData();
			// 	}
			// },



			handleCalendar(type) {
				const cur_year = parseInt(this.cur_year);
				const cur_month = parseInt(this.cur_month);
				var newMonth;
				var newYear = cur_year;
				if (type === 0) {
					//上个月
					newMonth = cur_month - 1;
					if (newMonth < 1) {
						newYear = cur_year - 1;
						newMonth = 12;
					} else if (newMonth < 10) {
						newMonth = '0' + newMonth;
					}
				} else {
					newMonth = cur_month + 1;
					if (newMonth > 12) {
						newYear = cur_year + 1;
						newMonth = '01';
					} else if (newMonth < 10) {
						newMonth = '0' + newMonth;
					}
				}
				let month = newYear + '-' + newMonth
				this.getDataList(month);
			},



			//签到点击
			toSign() {


				let allFalse = this.list.every(item => item.show === false);
				if (allFalse) {
					this.list[0].show = true;
					uni.setStorageSync('list', this.list)
				} else {
					let allTrue = this.list.every(item => item.show === true);
					if (allTrue) {
						this.list = this.list.map(item => ({
							...item,
							show: false
						}));
						console.log(this.list, 'this.list')
						uni.setStorageSync('list', this.list)
						this.toSign()
					} else {
						let lastTrueIndex = -1;
						for (let i = 0; i < this.list.length; i++) {
							if (this.list[i].show === true) {
								lastTrueIndex = i + 1;
							}
						}
						this.list[lastTrueIndex].show = true
						uni.setStorageSync('list', this.list)
					}
				}



			},
			// 签到操作函数
			async onSign() {
				// if (this.canSignIn()) {
				// 	// 这里可以添加实际的签到业务逻辑，比如向服务器发送签到请求等
				// 	this.saveSignInDate();
				// 	this.toSign()
				// 	uni.showToast({
				// 		title: '签到成功',
				// 		icon: 'success'
				// 	});
				// } else {
				// 	uni.showToast({
				// 		title: '今天已经签到过啦',
				// 		icon: 'none'
				// 	});
				// }
				let res = await getSigninSignin()
				if (res.code == 1) {
					this.closeSign()
					this.getDataList()
					this.showSignBox = true
				}
				this.getUserInfo()
			},
			// 判断是否可签到函数
			canSignIn() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				const currentSignInDate = `${year}-${month}-${day}`;

				const storedSignInDate = uni.getStorageSync('signInDate');
				console.log(currentSignInDate, 'currentSignInDate')
				if (!storedSignInDate || storedSignInDate !== currentSignInDate) {
					return true; // 可以签到，要么没签过（存储为空），要么不是同一天
				}

				return false; // 当天已经签到过，不可签到
			},
			// 保存签到日期函数
			saveSignInDate() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				const signInDate = `${year}-${month}-${day}`;
				uni.setStorageSync('signInDate', signInDate);
			},















			//关闭签到弹框--签到成功后点击
			closeSign() {
				this.showSignBox = false;
				this.isSigned = true;
			},
			//打开签到弹框
			openRule() {
				this.showRuleBox = true;
			},
			//关闭签到弹框
			closeRule() {
				this.showRuleBox = false;
			},
			//跳转积分商城
			toMall() {
				uni.navigateTo({
					url: '/discountPage/pointsMail/pointsMail'
				})
			},
			//跳转积分明细
			toDetail() {
				uni.navigateTo({
					url: '/templatePage/coupon/detail/detail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contents {
		box-sizing: border-box;
		padding-bottom: 20rpx;
		background: #fff;
		min-width: 100vw;
		min-height: 100vh;

	}

	.t-hc {
		opacity: 0.7;
	}

	.t-wrap {
		// height: 380rpx;
		width: 100%;
		box-sizing: border-box;

		.t-jf {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding-bottom: 40rpx;
			background: linear-gradient(to bottom, #ff5220, #ff9637);
			// display: flex;
			// flex-direction: row;
			// justify-content: space-between;
			// align-items: center;

			.t-jf-points {
				padding-left: 70rpx;

				.t-jf-title {
					font-size: 32rpx;
					color: #fff;
				}

				.t-jf-info {
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.t-jf-num {
						font-size: 56rpx;
						font-weight: bold;
						color: #fff;
						line-height: 56rpx;
					}

					.t-jf-detail {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						text {
							font-size: 24rpx;
							color: #fff;
							margin-left: 20rpx;
						}

						image {
							width: 18rpx;
							height: 18rpx;
							margin-left: 6rpx;
						}
					}
				}
			}

			.t-jf-mall {
				margin-right: 70rpx;
				padding: 15rpx 30rpx;
				background: #fff;
				border-radius: 50rpx;
				color: #1abb7c;
			}
		}

		.t-bg-wrap {
			position: relative;
			align-self: flex-start;
			top: 54rpx;

			.t-bg {
				--width: 440vw;
				position: absolute;
				height: var(--width);
				width: var(--width);
				left: calc(var(--width)*-1/2 + 50vw - 40rpx);
				top: calc(var(--width)*-1 + 1vw);
				border-radius: 50%;
				z-index: -1;
				background: linear-gradient(to bottom, #18ba7a, #88bf87);
			}
		}
	}

	.t-sign-con {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding: 0rpx 30rpx;
		background: #fff;

		.wrap {
			width: 100%;
			height: 360rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;
			top: -50rpx;
			box-sizing: border-box;
			box-shadow: 0 30rpx 50px rgba(0, 0, 0, .4);

			.t-sign-top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				width: 100%;
				padding: 28rpx 20rpx;

				.lx {
					font-size: 32rpx;
					color: #333;

					text {
						color: #18ba7a;
						margin: 0rpx 3rpx;
					}
				}

				.gz {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 28rpx;
					color: #999;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.t-sign-body {
				height: 124rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.t-sign-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100%;
					box-sizing: border-box;
					padding: 0rpx 12rpx;
					border-radius: 10rpx;

					&.signed {
						background: #27ba76;

						text {
							color: #fff !important;
						}
					}

					.t-img-con {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						background: #57da78;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.t-img {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							background: #27ba76;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}

					text {
						font-size: 20rpx;
						color: #777;
						margin-top: 12rpx;
					}
				}
			}

			.t-sign-btn {
				width: 514rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 50rpx;
				background-color: #17ba7a;
				font-size: 32rpx;
				color: #fff;
				margin: 32rpx auto 0rpx;

				&.t-signed {
					background-color: #b8b8b8 !important;
				}
			}
		}
	}

	.t-task {
		box-sizing: border-box;
		background: #fff;
		padding: 0rpx 30rpx;

		.t-title {
			font-size: 32rpx;
			color: #000;
			text-align: center;
		}

		.t-task-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 130rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #cdcdcd;

			.left {
				.taskname {
					max-width: 550rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					color: #333;

					text {
						color: #18ba7a;
						margin-left: 10rpx;
					}
				}

				.taskdesc {
					max-width: 510rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 26rpx;
					color: #999;
					margin-top: 14rpx;
				}
			}

			.right {
				padding: 16rpx 34rpx;
				border-radius: 50rpx;
				background-color: #17ba7a;
				text-align: center;
				font-size: 28rpx;
				color: #fff;

				&.finish {
					background-color: #b8b8b8 !important;
				}
			}
		}
	}

	.t-o-wrap {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		.t-sign-bg {
			width: 450rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}

		.t-g-jf {
			position: relative;
			top: -220rpx;
			font-size: 36rpx;
			color: #17ba7a;
		}

		.t-g-desc {
			position: relative;
			top: -200rpx;
			font-size: 28rpx;
			color: #999;
		}

		.close-btn {
			position: relative;
			top: -173rpx;
			width: 300rpx;
			height: 60rpx;
			border-radius: 50rpx;
			background: #17ba7a;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #fff;
		}

		.t-rule {
			width: 690rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				text-align: center;
				color: #333;
				font-size: 32rpx;
				margin-top: 10rpx;
			}

			.desc {
				text-align: justify;
				margin-top: 20rpx;
				white-space: pre-line;
				font-size: 32rpx;
				color: #666;
				line-height: 50rpx;
			}
		}

		.t-close {
			width: 60rpx;
			height: 60rpx;
			margin-top: 40rpx;
			padding: 10rpx;
		}
	}





	.tui-product-box {
		// margin-top: 20rpx;
		// padding: 0 25rpx;
		box-sizing: border-box;
	}



	.tui-size-sm {
		font-size: 24rpx;
		line-height: 24rpx;
		transform: scale(0.8);
		transform-origin: 0 50%;
	}

	.tui-original__pri {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999999;
		transform-origin: center 10%;
		transform: scale(0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: line-through;
	}

	/*秒杀商品*/

	.tui-more__box {
		display: flex;
		align-items: center;
		font-weight: 400;
		color: #999;
	}

	.tui-more__box text {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 180rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24rpx;
	}

	.tui-new-title {
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}



	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-title__img {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
	}

	.tui-title__img image {
		width: 352rpx;
		height: 32rpx;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20rpx; */
	}

	.tui-product-container {
		flex: 1;
		padding: 15rpx 10rpx;
		background: #f2f2f2;
		border-radius: 20rpx;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 10rpx;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}


	.unicorn-font-size {
		font-size: 35rpx;
		font-weight: 700;
	}

	.unicorn-border-radius-swiper {
		border-radius: 10px;
	}

	.unicorn-body {
		padding: 0rpx 15rpx;
	}

	.unicorn-image {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}


	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.uni-margin-wrap {
		// width: 400rpx;
		height: 205rpx;
		// width: 100%;
		display: flex;
		padding: 0 20rpx;
		justify-content: space-between;
		width: 60%;
	}

	.swiper {
		// height: 300rpx;
		height: 205rpx;
		width: 100%;
	}

	.swiper-item {
		display: block;
		height: 205rpx;
		line-height: 205rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.moneyIcon {
		background-image: url('https://oss.taoding1688.com/static/uniapp/static/85.png');
		background-repeat: no-repeat;
		background-size: 80% 88%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
		padding: 8rpx 0;
	}


	.header-box {
		border-top: 2rpx solid rgba(#dfdfdf, 0.5);
	}

	// 日历
	.calendar {
		background: #fff;

		.sign-everyday {
			height: 100rpx;
			background: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(223, 223, 223, 0.4);

			.sign-everyday-title {
				font-size: 32rpx;
				color: rgba(51, 51, 51, 1);
				font-weight: 500;
			}

			.sign-num-box {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);

				.sign-num {
					font-size: 30rpx;
					font-weight: 600;
					color: #ff6000;
					padding: 0 10rpx;
					font-family: OPPOSANS;
				}
			}
		}

		// 年月日
		.bar {
			height: 100rpx;

			.date {
				font-size: 30rpx;
				font-family: OPPOSANS;
				font-weight: 500;
				color: #333333;
				line-height: normal;
			}
		}

		.cicon-back {
			margin-top: 6rpx;
			font-size: 30rpx;
			color: #c4c4c4;
			line-height: normal;
		}

		.cicon-forward {
			margin-top: 6rpx;
			font-size: 30rpx;
			color: #c4c4c4;
			line-height: normal;
		}



	}

	.is-sign {
		// width: 120rpx;
		// height: 120rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.is-sign-num {
			font-size: 24rpx;
			font-family: OPPOSANS;
			font-weight: 500;
			line-height: normal;
		}

		.is-sign-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.cell-num {
		font-size: 24rpx;
		font-family: OPPOSANS;
		font-weight: 500;
		color: #333333;
		line-height: normal;
	}

	.cicon-title {
		position: absolute;
		right: -10rpx;
		top: -6rpx;
		font-size: 20rpx;
		color: red;
	}



	.model-box {
		width: 520rpx;
		// height: 590rpx;
		background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
		// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 10rpx;

		.cicon-check-round {
			font-size: 70rpx;
			color: #fff;
		}

		.score-title {
			font-size: 34rpx;
			font-family: OPPOSANS;
			font-weight: 500;
			color: #fcff00;
		}

		.model-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.model-bg {
			width: 520rpx;
			height: 344rpx;
			background-size: 100% 100%;
			background-image: v-bind(headerBg);
			background-repeat: no-repeat;
			border-radius: 0 0 10rpx 10rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				// color: var(--ui-BG-Main);
				color: #ff6000;
			}

			.subtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}

			.cancel-btn {
				width: 220rpx;
				height: 70rpx;
				border: 2rpx solid #ff6000;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6000;
				line-height: normal;
				margin-right: 10rpx;
			}

			.confirm-btn {
				width: 220rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #ff6000, #fe832a);
				box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: normal;
			}
		}
	}

	//签到说明
	.activity-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: normal;
	}

	.activity-des {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 40rpx;
	}

	// 日历表
	.myDateTable {
		display: flex;
		flex-wrap: wrap;

		.dateCell {
			width: calc(100% / 7);
			height: 100rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}


	// 星期
	.week {
		margin-top: 15rpx;

		.week-item {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			flex: 1;
		}
	}

	.ss-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ss-row-center {
		justify-content: center;
	}

	.ss-bg-opactity-block {
		background-color: rgba(#000, 0.2);
		color: #fff;
	}

	/* ==================
	          flex布局
	 ==================== */

	.ss-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ss-flex-1 {
		flex: 1;
	}

	.ss-flex-col {
		display: flex;
		flex-direction: column;
	}

	.ss-flex-wrap {
		flex-wrap: wrap;
	}

	.ss-flex-nowrap {
		flex-wrap: nowrap;
	}

	.ss-col-center {
		align-items: center;
	}

	.ss-col-top {
		align-items: flex-start;
	}

	.ss-col-bottom {
		align-items: flex-end;
	}

	.ss-col-stretch {
		align-items: stretch;
	}

	.ss-row-center {
		justify-content: center;
	}

	.ss-row-left {
		justify-content: flex-start;
	}

	.ss-row-right {
		justify-content: flex-end;
	}

	.ss-row-between {
		justify-content: space-between;
	}

	.ss-row-around {
		justify-content: space-around;
	}

	.ss-self-start {
		align-self: flex-start;
	}

	.ss-self-end {
		align-self: flex-end;
	}

	.ss-self-center {
		align-self: center;
	}

	.ss-h-100 {
		height: 100%;
	}

	.ss-w-100 {
		width: 100%;
	}

	/* ==================
	    按钮
	 ==================== */
	.ss-reset-button {
		padding: 0;
		margin: 0;
		font-size: inherit;
		background-color: transparent;
		color: inherit;
		position: relative;
		border: 0rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: baseline;
		transform: translate(0, 0);
	}

	.ss-reset-button.button-hover {
		transform: translate(1px, 1px);
		background: none;
	}

	.ss-reset-button::after {
		border: none;
	}

	// 签到按钮
	.sign-box {
		height: 140rpx;
		width: 100%;

		.sign-btn {
			width: 510rpx;
			height: 80rpx;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-weight: 500;
			box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
			background: rgb(255, 236, 200);
			color: #f15400;
		}

		.already-btn {
			width: 510rpx;
			height: 80rpx;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-weight: 500;
			background: rgb(255, 236, 200);
			color: #f15400;
		}
	}
</style>